<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>vue核心用法</title>
</head>

<body>
  <!-- <h1>{{name}},{{age}}</h1> -->
  <!-- 小胡子语法=》常用用法：
      1. 进行四则运算 =》 加减乘除

      2. 字符串拼接

      3. 三元运算?:

      4. js原生对象方法调用

      5. methods中方法调用 -->
  <div id="app">
    <h1>{{name}},{{age}}</h1>
    <!-- 小胡子用法 -->
    <ul>
      <li>{{age*2}}</li>
      <!-- <li>{{age++}}</li> -->
      <li>{{name+'-猛哥'}}</li>
      <li>{{bool?'东方':'文涛'}}</li>
      <li>{{name.replace('hi','猛')}}</li>
      <li>{{getName()}}</li>
    </ul>
    <!-- 华丽的分割线 -->
    <hr />
    <ul>
      <li>{{bool}}</li>
      <li>{{obj}}</li>
      <li>{{obj.a}}</li>
      <li>{{arr}}</li>
      <li>数组第一项name的值：{{arr[0].name}},{{arr[0].age}}岁</li>
      <!-- 方法调用 -->
      <li>{{getName()}}</li>
      <li></li>
    </ul>
    <!-- 了解 -->
    <h1>{{$data.name}}</h1>
  </div>
  <!-- 引入vue.js -->
  <!-- 生产版本 -->
  <!-- <script src="https://cdn.jsdelivr.net/npm/vue@2.6.12"></script> -->
  <!-- 开发版本 -->
  <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.js"></script>
  <script>
    // 使用Vue
    console.log(Vue)
    /**
      * 步骤：
      * 1. 验证是否引入成功（标准：window.Vue可以正常输出）
      * 2. 开始使用:
      *    * 初始化一个Vue的实例 =》 new Vue({})
      *    * 在实例的配置项中使用el=> 设置vue实例的挂载点和模板的管理边界
      *    * 在实例的配置项中使用data=> 为视图(模板)提供响应式数据
      */
    const vm = new Vue({
      // el
      // 1. 作用：vue实例的挂载点,确定vue能够控制的视图区域 只有在视图区域内部才能生效
      // 2. 可接受的值
      //    1.CSS选择器字符串   2.HTMLElement实例（DOM对象）=>document.querySelector('#app')
      el: '#app',
      // data为视图提供响应式数据
      /*
        作用: 放置视图依赖的数据
        特点：
          1. data是一个对象 里面可以存放任意类型的值 
          2. 数据是响应式的 一旦发生变化 视图依赖数据的部分会立即发生变化
        如何使用data中的值
        1.直接使用 vm.name
        2.可以使用 vm.$data.name
        3.模板中使用  直接使用data中的属性名称即可
        */
      data: {
        name: 'hi vue!',
        age: 18,
        bool: false,
        obj: {
          a: 1,
          b: 2
        },
        arr: [{ name: '小红', age: 18 }, { name: '小刚', age: 28 }]
      },
      // 放置各种方法实现各种业务功能=>方法
      // 特点：1. 方法内的this就是vm（vue实例）
      methods: {
        // 获取data中定义的name数据
        // es6写法（推荐）
        getName() {
          // 怎么获取？
          // return vm.name
          // console.log(vm, this)
          // 咱们可以在这里调用getAge的方法吗？=》可以=》this.方法名()
          console.log('调用methods中声明的其它方法：', this.getAge())
          return this.name
        },
        // 老写法
        getAge: function () {
          return this.age
        },
        // 修改data中的数据
        changeName() {
          this.name = 'vue真牛！'
        }
      }
    })

    // 调用methods中声明的方法
    console.log(vm.getName())
    console.log(vm.getAge())


  </script>
</body>

</html>